<html>

<head>
    <title>NGO Collaboration Platform</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <link rel="stylesheet" href="./stylesheets/style.css">

</head>
<script>
    var username = getUsername();
    var selected_val;

    $(document).ready(function () {
        $("#save").click(function (e) {
            var quantity = $("#quantity").val();
            var selected_val = $("#cat_select option:selected").val();
            var date_fulfil = $("#dateofff").val();

            window.location = "../createneed?username=" + username + "&item=" + selected_val + "&qty=" + quantity + "&end_date=" + date_fulfil;
        });
        $("#back_to_home_page").click(function (e) {
            window.location = "../menu?username=" + username;
        });
    });
    function getUsername() {
            var params = window.location.search.substring(1).split("&");
            for (var i = 0; i < params.length; i++) {
                var pair = params[i].split('=');
                if (pair[0] === 'username' || pair[0] === 'uname' || pair[0] === 'ngo') {
                    return pair[1];
                }
            }
            return null;
        }
</script>

<body class="body">
    <div id="header" class="header">
            NGO Collaboration Platform
    </div>
    <br/>
    
    <div id="header2" class="header2">
        Create a New Need
    </div>
    <p></p>
    <div class="newNeedForm">
        <form id="form_id" method="post" name="myform">
            <table class="needTable" style="border-spacing: 2cm">
                    <tr>
                        <td style="text-align: left">
                            Category
                        </td>
                        <td>
                            <select id="cat_select" style="width: 100%">
                                <option value="Food">Food</option>
                                <option value="Clothes">Clothes</option>
                                <option value="Books">Books</option>
                                <option value="Blankets">Blankets</option>
                                <option value="Other">Other</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left">
                            Required Quantity
                        </td>
                        <td>
                            <input type="text" name="Quantity" id="quantity" />
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left">
                            Expected date of fulfillment  
                        </td>
                        <td>
                            <input type="text" name="dateofff" id="dateofff" />
                        </td>
                    </tr>
            </table>
            <br/><br/>
            <table style="width: 70%;">
                    <tr>
                        <td style="text-align: left">
                            <input style="text-align: left" type="button" class="pledgeButton" value="Back to Home Page" id="back_to_home_page" />
                        </td>
                        <td>
                            <input style="text-align: right" type="button" class="pledgeButton" value="Save" id="save" />
                        </td>
                    </tr>
            </table>
        </form>
    </div>
    
    <br>
    <script>
        var res = '<%=result%>';
        if( res != 'Create Need' ){
            alert(res);
        }
    </script>
   
</body>

</html>